import React from "react";

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />
  }
  return <GuestGreeting />
}

function LoginButton (props) {
  return <button onClick={props.onClick}>Login</button>
}

function LogOutButton (props) {
  return <button onClick={props.onClick}>Logout</button>
}

export default class LoginControl extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isLogin: false
    }
    
    this.login = this.login.bind(this)
    this.logout = this.logout.bind(this)
  }

  login () {
    this.setState({
      isLogin: true
    })
  }

  logout () {
    this.setState({
      isLogin: false
    })
  }

  render () {
    let button, isLogin = this.state.isLogin;
    button = isLogin ? <LogOutButton onClick={this.logout}/> : <LoginButton onClick={this.login}/>
    return (
      <div>
        <Greeting isLoggedIn={isLogin}/>
        {button}
        {/* <button></button> */}
      </div>
    )
  }
}
// function Greeting(props) {
//   const isLoggedIn = props.isLoggedIn;
//   if (isLoggedIn) {
//     return <UserGreeting />;
//   }
//   return <GuestGreeting />;
// }